import React, { useEffect, useState, useRef } from 'react'
import { useNavigate ,NavLink} from 'react-router-dom'
import getHome from '../api/home'
import { IGoods } from '../../interface'
import { store } from '../../store'

// import  "./swiper1.scss"
import { Button, Space, Swiper, Toast } from 'antd-mobile'
// import { DemoBlock, DemoDescription } from 'demos'
// import { SwiperRef } from 'antd-mobile/es/components/swiper'
import "./home.scss"


export default function Home() {
    const navigate = useNavigate()
    const { token, _id } = store.getState().userReducer.user
    const [goods_list, set_list] = useState([])
    const getGoods = async () => {
        let res = await getHome["getHome"]()
        console.log(res, 'res')
        set_list(res.data.data)
    }
    useEffect(() => {
        getGoods()

    }, [])

    const swpList: string[] = [
        "https://oss.51cocoa.com//upload/images/20220923/c32cc42624d5fdefc1067bd04479afb8.png",
        "https://oss.51cocoa.com//upload/images/20220923/c83a48587b01b3e96485b11d7429d80b.png",
        "https://oss.51cocoa.com//upload/images/20220923/2098160ee4eff171bc6657edc356082d.png",
        "https://oss.51cocoa.com//upload/images/20220923/d41836af1d5c02cedcbae115a994447a.png",

    ]

    const items = swpList.map((url, index) => (
        <Swiper.Item key={index}>
            <div
                className='content'
                style={{ backgroundImage: url }}
                onClick={() => {
                    navigate('/find')
                }}
            >
                {<img src={url} />}
            </div>
        </Swiper.Item>
    ))
    return (

        <div>
            
            <div><Swiper autoplay loop>{items}</Swiper></div>
            {/* <DemoBlock title='自动播放'>
                
            </DemoBlock> */}
            <div className='big'>
                <div className='classify'>
                    <h2>热门分类</h2>
                    <div onClick={() => {
                        navigate('/find')
                    }} style={{ backgroundImage:"url('https://img1.baidu.com/it/u=3370352296,3436572090&fm=253&fmt=auto&app=138&f=JPEG?w=968&h=377')"}}>CAKE·蛋糕</div>
                    <div onClick={() => {
                        navigate('/find')
                    }} style={{backgroundImage:"url('https://img0.baidu.com/it/u=3416243203,2700176468&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=225')"}}>BREAD·蛋糕</div>
                    <div onClick={() => {
                        navigate('/find')
                    }} style={{backgroundImage:"url('https://img2.baidu.com/it/u=369860550,2972360425&fm=253&fmt=auto&app=138&f=JPEG?w=964&h=357')"}}>TEATIME·下午茶</div>
                    <div onClick={() => {
                        navigate('/find')
                    }} style={{backgroundImage:"url('https://img2.baidu.com/it/u=420885056,745233840&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=206')"}}>CO CTR·企业中心</div>
                </div>

                <div className='suggest' >
                    <h2>当季推荐</h2>
                    <div className='box'>
                        {goods_list.filter((ele: IGoods) => ele.category == '蛋糕').map((item: IGoods, i: number) => i < 7 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                            <p>{item.goods_name}</p>
                            <span>￥{item.price}.00</span></NavLink>
                        </div>)}
                    </div>
                </div>

                <div className='modular'>
                    <h2>秋季赏味</h2>
                    <p>金色果实，香气汹涌。</p>
                    <div>
                        <div onClick={() => {
                            navigate('/find')
                        }} className='banner'>
                            <img src="https://oss.51cocoa.com//upload/images/f014e80a5cde41dc2ecb9ab97d87f110.jpg" alt="" />
                        </div>
                        <div className='list'>
                        {goods_list.filter((ele: IGoods) => ele.category == '蛋糕').map((item: IGoods, i: number) => i < 3 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                                <p>{item.goods_name}</p>
                                <span>&yen;{item.price}</span></NavLink>
                            </div>)}
                        </div>
                        <div className='button'>
                            <button onClick={() => {
                                navigate('/find')
                            }}>查看全部 </button>
                        </div>
                    </div>
                </div>

                <div className='modular'>
                    <h2>生日聚会</h2>
                    <p>可以许愿，可以照亮眼前。</p>
                    <div>
                        <div onClick={() => {
                            navigate('/find')
                        }} className='banner'>
                            <img src="https://oss.51cocoa.com//upload/images/aebd67b1bfb6192f922e77b985cb34f4.jpg" alt="" />
                        </div>
                        <div className='list'>
                            {goods_list.filter((ele: IGoods) => ele.tabs == '推荐').map((item: IGoods, i: number) => i < 3 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                                <p>{item.goods_name}</p>
                                <span>&yen;{item.price}</span></NavLink>
                            </div>)}
                        </div>
                        <div className='button'>
                            <button onClick={() => {
                                navigate('/find')
                            }}>查看全部</button>
                        </div>
                    </div>
                </div>

                <div className='modular'>
                    <h2>早餐</h2>
                    <p>早餐的品质，就是生活品质。</p>
                    <div>
                        <div onClick={() => {
                            navigate('/find')
                        }} className='banner'>
                            <img src="https://oss.51cocoa.com//upload/images/2db0b93ba5790b9827d5e2740076bbde.jpg" alt="" />
                            <img src="" alt="" />
                        </div>
                        <div className='list'>
                            {goods_list.filter((ele: IGoods) => ele.category == '面包').map((item: IGoods, i: number) => i < 3 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                                <p>{item.goods_name}</p>
                                <span>&yen;{item.price}</span></NavLink>
                            </div>)}
                        </div>
                        <div className='button'>
                            <button onClick={() => {
                                navigate('/find')
                            }}>查看全部</button>
                        </div>
                    </div>
                </div>

                <div className='modular'>
                    <h2>下午茶</h2>
                    <p>工作与生活的平衡，活力唤醒与能量补给。</p>
                    <div>
                        <div onClick={() => {
                            navigate('/find')
                        }} className='banner'>
                            <img src="https://oss.51cocoa.com/upload/images/20210319/c5c143675e2544765f3c5b043a1af431.jpg" alt="" />
                            <img src="" alt="" />
                        </div>
                        <div className='list'>
                            {goods_list.filter((ele: IGoods) => ele.category == '下午茶').map((item: IGoods, i: number) => i < 3 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                                <p>{item.goods_name}</p>
                                <span>&yen;{item.price}</span></NavLink>
                            </div>)}
                        </div>
                        <div className='button'>
                            <button onClick={() => {
                                navigate('/find')
                            }}>查看全部</button>
                        </div>
                    </div>
                </div>

                <div className='modular'>
                    <h2>假期出游</h2>
                    <p>常温、便携，可以带往更远的地方。</p>
                    <div>
                        <div onClick={() => {
                            navigate('/find')
                        }} className='banner'>
                            <img src="https://oss.51cocoa.com/public/images/af/80/ef/de4d836fcd4d164ab51dca2a9701ecb8.jpg" alt="" />
                            
                        </div>
                        <div className='list'>
                        {goods_list.filter((ele: IGoods) => ele.category == '冰淇凌').map((item: IGoods, i: number) => i < 3 && <div className='introduction' key={item._id}>
                            <NavLink to={'/topic/' + item._id}><img src={item.img} alt="" />
                                <p>{item.goods_name}</p>
                                <span>&yen;{item.price}</span></NavLink>
                            </div>)}
                        </div>
                        <div className='button'>
                            <button onClick={() => {
                                navigate('/find')
                            }}>查看全部</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}